<!DOCTYPE html>
<html lang="en">

<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="utf-8">
    
        
                <meta name="keywords" content="爱前端 | 爱工作 | 爱生活">
                
                    
                            <meta name="description" content="This is My blog">
                            
                                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                                <title>
                                    
                                                一只正在成长的程序猿
                                </title>
                                
                                    <link rel="shortcut icon" href="/images/headPortrait.png">
                                    
                                        <link rel="stylesheet" href="/css/style.css">
                                            
                                                <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
                                                    
                                                        <script src="/js/pace.min.js"></script>
</head></html>

    <body>
        <main class="content">
            <section class="jumbotron">
  <div class="video">
    
      <div class="video-frame">
        <img src="/images/ocean/overlay-hero.png" alt="Decorative image frame">
      </div>
    
    <div class="video-media">
      <video playsinline="" autoplay="" loop="" muted="" data-autoplay=""
             poster="/images/ocean/ocean.png" x5-video-player-type="h5">
        <source src="/images/ocean/ocean.mp4" type="video/mp4">
        <source src="/images/ocean/ocean.ogv" type="video/ogg">
        <source src="/images/ocean/ocean.webm" type="video/webm">
        <p>Your user agent does not support the HTML5 Video element.</p>
      </video>
      <div class="video-overlay"></div>
    </div>
    <div class="video-inner text-center text-white">
      <h1><a href="/">一只正在成长的程序猿</a></h1>
      <p>爱前端 | 爱工作 | 爱生活</p>
      <div><img src="/images/shark-inverted.svg" class="brand" alt="一只正在成长的程序猿"></div>
    </div>
    <div class="video-learn-more">
      <a class="anchor" href="#landingpage"><i class="fe fe-mouse"></i></a>
    </div>
  </div>
</section>

<div id="landingpage">
  <section class="outer">
  <article class="articles">
    
    <h1 class="page-type-title"></h1>

    
      
        <article id="post-vue-pdf简单用法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue-pdf简单用法/">vue-pdf</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue-pdf简单用法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.603Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先下载"><a href="#1-先下载" class="headerlink" title="1.先下载"></a>1.先下载</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install vue-pdf --save-dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue-pdf简单用法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue-pdf简单用法/" data-id="cjzdy95uj000pacu8ugrl2zm9"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue-pdf/">vue-pdf</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vuejs 移动端 实现div拖拽移动" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vuejs 移动端 实现div拖拽移动/">vue 移动端 实现div拖拽移动</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vuejs 移动端 实现div拖拽移动/" class="article-date">
  <time datetime="2019-08-07T09:31:46.591Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <blockquote>
<p>相关知识点<br>touchstart 当在屏幕上按下手指时触发</p>
<p>touchmove 当在屏幕上移动手指时触发</p>
<p>touchend 当在屏幕上抬起手指时触发<br>mousedown mousemove mouseup对应的是PC端的事件</p>
<p>touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。</p>
</blockquote>
        
          <a class="article-more-link" href="/2019/08/07/vuejs 移动端 实现div拖拽移动/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vuejs 移动端 实现div拖拽移动/" data-id="cjzdy95um000vacu8f4z92971"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue-移动端-实现div拖拽移动/">vue 移动端 实现div拖拽移动</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue-i18n用法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue-i18n用法/">vue-i18n</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue-i18n用法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.575Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h2 id="vue-i18n"><a href="#vue-i18n" class="headerlink" title="vue-i18n"></a>vue-i18n</h2><h4 id="1-先下载"><a href="#1-先下载" class="headerlink" title="1.先下载"></a>1.先下载</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install vue-i18n --save-dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue-i18n用法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue-i18n用法/" data-id="cjzdy95uh000macu86p5jaeo2"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue-i18n/">vue-i18n</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue-cookies" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue-cookies/">vue-cookies</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue-cookies/" class="article-date">
  <time datetime="2019-08-07T09:31:46.559Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先安装"><a href="#1-先安装" class="headerlink" title="1.先安装"></a>1.先安装</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install vue-cookies --save-dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue-cookies/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue-cookies/" data-id="cjzdy95ue000iacu87j8ehi0o"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue-cookies/">vue-cookies</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue-clipboard2实现复制粘贴" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue-clipboard2实现复制粘贴/">vue-clipboard2 实现复制粘贴</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue-clipboard2实现复制粘贴/" class="article-date">
  <time datetime="2019-08-07T09:31:46.557Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先下载vue-clipboard2"><a href="#1-先下载vue-clipboard2" class="headerlink" title="1.先下载vue-clipboard2"></a>1.先下载<code>vue-clipboard2</code></h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install vue-clipboard2 --save-dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue-clipboard2实现复制粘贴/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue-clipboard2实现复制粘贴/" data-id="cjzdy95ub000facu86ixsgujb"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue-clipboard2/">vue-clipboard2</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue2.0到3.0的桥接" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue2.0到3.0的桥接/">vue cli3=&gt;vue cli2桥接</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue2.0到3.0的桥接/" class="article-date">
  <time datetime="2019-08-07T09:31:46.556Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <blockquote>
<p>vue cli3=&gt;vue cli2桥接</p>
</blockquote>
<h4 id="1-先安装"><a href="#1-先安装" class="headerlink" title="1.先安装"></a>1.先安装</h4><figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">npm</span> install -g @vue/cli</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue2.0到3.0的桥接/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue2.0到3.0的桥接/" data-id="cjzdy95uk000sacu8qenvweft"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue-cli3-vue-cli2桥接/">vue cli3=>vue cli2桥接</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-vue md5加密用法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/vue md5加密用法/">vue md5加密用法</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/vue md5加密用法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.555Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先下载md5"><a href="#1-先下载md5" class="headerlink" title="1.先下载md5"></a>1.先下载md5</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install js-md5 --save-dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/vue md5加密用法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/vue md5加密用法/" data-id="cjzdy95u7000bacu85fvlznzh"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/md5加密用法/">md5加密用法</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-swiper" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/swiper/">swiper用法</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/swiper/" class="article-date">
  <time datetime="2019-08-07T09:31:46.534Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先下载"><a href="#1-先下载" class="headerlink" title="1.先下载"></a>1.先下载</h4><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install swiper --save-dev</span><br></pre></td></tr></table></figure>
        
          <a class="article-more-link" href="/2019/08/07/swiper/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/swiper/" data-id="cjzdy95u5000aacu8rmansgv8"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/swiper用法/">swiper用法</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-localStorage和sessionStorage的监听" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/localStorage和sessionStorage的监听/">localStorage和sessionStorage的监听</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/localStorage和sessionStorage的监听/" class="article-date">
  <time datetime="2019-08-07T09:31:46.502Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <h4 id="1-先在src下新建utils文件夹，新建tools-js，它会抛出一个dispatchEventStroage方法"><a href="#1-先在src下新建utils文件夹，新建tools-js，它会抛出一个dispatchEventStroage方法" class="headerlink" title="1.先在src下新建utils文件夹，新建tools.js，它会抛出一个dispatchEventStroage方法"></a>1.先在src下新建utils文件夹，新建tools.js，它会抛出一个dispatchEventStroage方法</h4>
        
          <a class="article-more-link" href="/2019/08/07/localStorage和sessionStorage的监听/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/localStorage和sessionStorage的监听/" data-id="cjzdy95u20007acu8kglzc516"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/localStorage/">localStorage</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/sessionStorage/">sessionStorage</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
        <article id="post-keepAlive使用方法" class="article article-type-post" itemscope itemprop="blogPost" data-scroll-reveal>

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h2 itemprop="name">
      <a class="article-title" href="/2019/08/07/keepAlive使用方法/">vue单页面，多路由，前进刷新，后退不刷新</a>
    </h2>
  
  




      </header>
    

    
      <div class="article-meta">
        <a href="/2019/08/07/keepAlive使用方法/" class="article-date">
  <time datetime="2019-08-07T09:31:46.484Z" itemprop="datePublished">2019-08-07</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/技术/">技术</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      

      

      
        <blockquote>
<p>目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。</p>
<p>注：　此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求，用户体验更流畅。</p>
</blockquote>
        
          <a class="article-more-link" href="/2019/08/07/keepAlive使用方法/">阅读更多...</a>
        
      
    </div>
    <footer class="article-footer">
      <a data-url="wgjh5.github.io/2019/08/07/keepAlive使用方法/" data-id="cjzdy95tz0005acu81l8oxgos"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/">vue</a></li></ul>

    </footer>

  </div>

  

  

</article>



      
  </article>
  

  
    <nav class="page-nav">
      
      <a class="extend prev" rel="prev" href="/page/2/">上一页</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/4/">下一页</a>
    </nav>
  
</section>
</div>

                <footer class="footer">
  <div class="outer">
    <div class="float-right">
      <ul class="list-inline">
  
    <li><i class="fe fe-smile-alt"></i> <span id="busuanzi_value_site_uv"></span></li>
  
</ul>
    </div>
    <ul class="list-inline">
      <li>&copy; 2019 一只正在成长的程序猿</li>
      <li>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></li>
      <li>Theme  <a href="https://github.com/zhwangart/hexo-theme-ocean">Ocean</a></li>
    </ul>
  </div>
</footer>

        </main>
        <aside class="sidebar">
            <button class="navbar-toggle"></button>

<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img src="/images/shark.svg" alt="一只正在成长的程序猿"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/archives">归档</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="搜索">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      <div class="totop" id="totop">
  <i class="fe fe-rocket"></i>
</div>
    </li>
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>

<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
        </aside>
        <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/lazyload.min.js"></script>
<script src="/js/snap.svg-min.js"></script>
<script src="/js/busuanzi-2.3.pure.min.js"></script>


  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/search.js"></script>


<script src="/js/ocean.js"></script>

    </body>

    </html>